require.config({
    baseUrl:"../modules",
    paths:{
        jq:"../libs/jquery",
        cookie:"../libs/cookie",
        cart_render:"cart_render",
        updateLocal:"cart_updateLocal",

    },
})


require(["jq","cookie","cart_render","updateLocal"],function(_,__,cart_render,updateLocal1,){
    class Cart{
        constructor(){
            this.tbody = document.querySelector(".asdfg");
            this.atbody = document.querySelectorAll(".asdfg");
            this.url = "http://localhost:3000/data/goods.json";
            this.boxd = document.querySelector(".boxd");

            const thatt = this;

            // 1. 开启ajax请求
            this.load();

            // 7. 绑定事件
            this.addEvent();
        }
        addEvent(){
            const that = this;
            this.tbody.addEventListener("input",function(eve){
                const e = eve || window.event;
                const tar = e.target || e.srcElement;
                // 8. 找到数量输入框
                if(tar.className === "setNum"){
                    // 获取id
                    that.id = tar.parentNode.parentNode.getAttribute("index")
                    // 获取数量
                    that.num = tar.value-0;
                    // 9. 从cookie的总数据中，查找要操作的数据的索引
                    that.setCookie(function(i){
                        // 修改查找到数据的数量
                        that.goodsMsg[i].num = that.num;
                    });
                }
            })
            
            // this.tbody.addEventListener("click",function(eve){
            //     const e = eve || window.event;
            //     const tar = e.target || e.srcElement;
            //     // console.log("click");
            //     // 10. 点击时找到删除按钮
            //     // console.log(tar.className);
            //     if(tar.className === "del"){
            //         // console.log("click del");
            //         // 获取id
            //         that.id = tar.parentNode.parentNode.getAttribute("index");
            //         // console.log(that.id);
            //         // console.log(that.id);
            //         // 删除DOM
            //         tar.parentNode.remove();
            //         // 11. 从cookie的总数据中，查找要操作的数据的索引
            //         that.setCookie(function(i){
            //             // 从数组中删除查找到的数据
            //             that.goodsMsg.splice(i, 1);
            //         });
            //          // ↓↓↓更新总数量↓↓↓
            //     getGoodsMsg(function(sunNum,i){
            //         return sunNum += goodsMsg[i].num 
            //     },function(sunNum){
            //         $(".asdfg-bottom-d2-s").html(sunNum)
            //     })
            //     // ↑↑↑更新总数量↑↑↑
            
            //     // ↓↓↓更新总价↓↓↓
            //     getGoodsMsg(function(sunNum,i){
            //         let j = 0;
            //         res.some((val,idx)=>{
            //             j = idx;
            //             return val.proId == goodsMsg[i].id
            //         })
            //         return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
            //     },function(sunNum){
            //         $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
            //     })
            //     // ↑↑↑更新总价↑↑↑

            //     }
            // })
        }
        setCookie(cb){
            // 先从原有数据中，找到当前要操作的数据
            let i=0;
            this.goodsMsg.some((val,idx)=>{
                i = idx;
                return val.id === this.id
            })
            // 找到当前要操作的数据之后，执行外部传入的修改操作
            cb(i);
            // 将数据，存回本地存储，覆盖原数据
            localStorage.setItem("goodsMsg",JSON.stringify(this.goodsMsg))
        }
        load(){
            $.ajax({
                url:this.url,
                success:(res)=>{
                    // 2. 解析数据
                    this.res = JSON.parse(res).msg;
                    console.log(this.res);
                    // 3. 获取本地存储数据
                    this.getCookie();
                }
            })
        }
        getCookie(){
            // 4. 解析本地存储数据
            this.goodsMsg = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
            // console.log(this.goodsMsg);
            // 5. 准备渲染页面
            this.render();
        }
        render(){
            //渲染
            cart_render(this.res,this.goodsMsg,this.boxd,this.tbody);
           

            let that = this;
            let goodsMsg = this.goodsMsg;
            let res = this.res
            

          
            //以下为修改复选框
            $(".asdfg").on("change",".asdfg-box-d1-i",function(){
                //获取当前被点击的id
                const id = $(this).parent().parent().attr("index");
                //获取当前被点击的checked值
                const c = this.checked;
                //单击时根据当前checkbox的checked值添加到localStorage值中
                updateLocal(goodsMsg,id,function(i){
                    goodsMsg[i].check = c
                })
                //判断是否全选是否需要勾上
                $("#asdfg-bottom-d1-ipt")[0].checked = goodsMsg.every(val=>val.check)
                

                //改变总数量
                getGoodsMsg(function(sunNum,i){
                    return sunNum += goodsMsg[i].num 
                },function(sunNum){
                    $(".asdfg-bottom-d2-s").html(sunNum)
                })
            
                //获取总价
                getGoodsMsg(function(sunNum,i){
                    let j = 0;
                    res.some((val,idx)=>{
                        j = idx;
                        return val.proId == goodsMsg[i].id
                    })
                    return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
                },function(sunNum){
                    $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
                })
            })
            //以上为修改复选框

            //加载时判断全选是否被选中
            $("#asdfg-bottom-d1-ipt")[0].checked = goodsMsg.every(val=>val.check)
           

            //↓↓↓修改数量时事件↓↓↓
            $(".asdfg").on("input",".setNum",function(){
                const id = $(this).parent().parent().attr("index");
                //获取获得当前商品的数量，并改为数字
                const n = this.value-0;

                //↓↓↓改变当前数量↓↓↓
                updateLocal(goodsMsg,id,function(i){
                    goodsMsg[i].num = n
                })
                //↑↑↑改变当前数量↑↑↑

                //获得当前商品的价格，并改为数字
                let cP = $(this).parent().parent().find(".asdfg-box-d4-s").html() - 0;
                //查看获取到的盒子
                // console.log($(this).parent().parent().find(".asdfg-box-d6-s").html((n*cP).toFixed(1)));
                //修改数量时，修改这个商品的总价
                $(this).parent().parent().find(".asdfg-box-d6-s").html((n*cP).toFixed(1));


                //↓↓↓更新总数量↓↓↓
                getGoodsMsg(function(sunNum,i){
                    return sunNum += goodsMsg[i].num 
                },function(sunNum){
                    $(".asdfg-bottom-d2-s").html(sunNum)
                })
                //↑↑↑更新总数量↑↑↑
            
                //↓↓↓更新总价↓↓↓
                getGoodsMsg(function(sunNum,i){
                    let j = 0;
                    res.some((val,idx)=>{
                        j = idx;
                        return val.proId == goodsMsg[i].id
                    })
                    return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
                },function(sunNum){
                    $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
                })
                //↑↑↑更新总价↑↑↑

            })
            //↑↑↑修改数量时事件↑↑↑


            
            // 修改localStorage的封装
            function updateLocal(goodsMsg,id,cb){
                let i = 0;
                goodsMsg.some((val,idx)=>{
                    i = idx;
                    return val.id ===id
                })
                cb(i)
                localStorage.setItem("goodsMsg",JSON.stringify(goodsMsg))
            }

            //修改全选按钮
            //选中全选，如果input发生变化时（change）
            $("#asdfg-bottom-d1-ipt").change(function(){
                //改变localStorage中check的的值
                //遍历localStorage，给localStorage的check改变为点击全选时，全选checkbox的checked值
                goodsMsg.forEach(val => {
                    val.check = this.checked;
                });
                //把改变过的数据保存到localStorage中
                localStorage.setItem("goodsMsg",JSON.stringify(goodsMsg))

                //改变页面上当前小checkbox的checked的值
                for(let i = 0;i<$(".asdfg-box-d1-i").length;i++){
                    $(".asdfg-box-d1-i")[i].checked = this.checked
                }



                //改变总数量
                getGoodsMsg(function(sunNum,i){
                    return sunNum += goodsMsg[i].num 
                },function(sunNum){
                    $(".asdfg-bottom-d2-s").html(sunNum)
                })
            
                //获取总价
                getGoodsMsg(function(sunNum,i){
                    let j = 0;
                    res.some((val,idx)=>{
                        j = idx;
                        return val.proId == goodsMsg[i].id
                    })
                    return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
                },function(sunNum){
                    $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
                })
            })

                //获取总数
            getGoodsMsg(function(sunNum,i){
                return sunNum += goodsMsg[i].num 
            },function(sunNum){
                $(".asdfg-bottom-d2-s").html(sunNum)
            })

            //获取总价
            getGoodsMsg(function(sunNum,i){
                let j = 0;
                res.some((val,idx)=>{
                    j = idx;
                    return val.proId == goodsMsg[i].id
                })
                return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
            },function(sunNum){
                $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
            })


            //点击“选中删除”
            $(".allDel").click(function(){
                var arr = goodsMsg.filter(val=>{
                    return !val.check;
                })
                // console.log(arr)
                console.log(goodsMsg.filter(val=>{
                    return !val.check;
                }))
                goodsMsg = arr;
                localStorage.setItem("goodsMsg",JSON.stringify(arr))


                let goodsMsgg = JSON.parse(localStorage.getItem("goodsMsg")); 
                $(".asdfg-bottom-d2-s").html("0")
                $(".asdfg-bottom-d3-s").html("0")

                cart_render(that.res,goodsMsgg,that.boxd,that.tbody);

                
                let str = "";
                let s = 0;
                // 读取商品总数据
                for(let i=0;i<res.length;i++){
                    // 读取本地存储数据
                    for(let j=0;j<goodsMsgg.length;j++){
                        
                        // 根据本地存储数据，比对商品总数据，获取到真正要渲染的数据
                        if(res[i].proId === goodsMsgg[j].id){
                            // console.log(this.res[i], this.goodsMsg[j].num);
                            // 拼接页面结构
                            s++;
                            if(goodsMsgg[j].num>=1){
                                str += `
                                            <div class="asdfg-box" index="${res[i].proId}">
                                        <div class="asdfg-box-d1"><input type="checkbox"  class="asdfg-box-d1-i" ${goodsMsgg[j].check ? "checked" : ""}></div>
                                        <div class="asdfg-box-d2"><img src="${res[i].urlImg}" alt=""><span>${res[i].bookName}
                                        </span></div>
                                        <div class="asdfg-box-d3">￥${res[i].oPrice}</div>
                                        <div class="asdfg-box-d4">￥${res[i].cPrice}</div>
                                        <div class="asdfg-box-d5"><input class="setNum" type="number" value="${goodsMsgg[j].num}" min="1" max="99"></div>
                                        <div class="asdfg-box-d6" style="color: red;">￥${(res[i].cPrice*goodsMsgg[j].num).toFixed(1)}</div>
                                        <div class="del">删除</div>
                                    </div>
                                </div> `;
                            }else{
                                str += ``;
                            }
                        }
                    }
                }
                // 6. 填充到页面
                that.boxd.style.height = s*112+130 +  "px";
                that.tbody.innerHTML = str;
                })
            

                            //↓↓↓删除按钮事件↓↓↓

            $(".asdfg").on("click",".del",function(){
                // console.log();
                const id = $(this).parent().attr("index");
                // console.log(id)
                // console.log(this.goodsMsg)
                updateLocal(goodsMsg,id,function(i){
                    goodsMsg.splice(i,1)
                })
                cart_render(that.res,that.goodsMsg,that.boxd,that.tbody);
                // ↓↓↓更新总数量↓↓↓
                getGoodsMsg(function(sunNum,i){
                    console.log(goodsMsg)
                    console.log(i)
                    return sunNum += goodsMsg[i].num 
                },function(sunNum){
                    $(".asdfg-bottom-d2-s").html(sunNum)
                })
                // ↑↑↑更新总数量↑↑↑
            
                // ↓↓↓更新总价↓↓↓
                getGoodsMsg(function(sunNum,i){
                    let j = 0;
                    res.some((val,idx)=>{
                        j = idx;
                        return val.proId == goodsMsg[i].id
                    })
                    return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
                },function(sunNum){
                    $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
                })

                // ↑↑↑更新总价↑↑↑
            })
            //↑↑↑删除按钮事件事件↑↑↑
            
            
            

            //封装获取localStorage中的值，然后输出到页面（DOM）
            function getGoodsMsg(cb,cd){
                let sunNum = 0;
                console.log(goodsMsg)
                for(let i = 0;i<$(".asdfg-box-d1-i").length;i++){
                    if($(".asdfg-box-d1-i")[i].checked){
                // for(let i = 0;i<goodsMsg.length;i++){
                //     if(goodsMsg[i].checked){
                    sunNum = cb(sunNum,i)
                    }else{
                        sunNum;
                    }
                }
                cd(sunNum)
            }
        }
       
      
        
    }

    new Cart;









})